<h2>ProgressBar (status {status} %)</h2>
<h3>default height</h3>

<ProgressBar status="{status}"> </ProgressBar>

<h3>10px height</h3>

<ProgressBar status="{status}" height="{height}"> </ProgressBar>

<script>
    import ProgressBar from '../ProgressBar.html';

    export default {
        components: { ProgressBar },
        data() {
            return {
                status: 10,
                height: 10
            };
        },
        oncreate() {
            const me = this;
            setInterval(function () {
                let { status } = me.get();

                status = status + 10;

                if (status >= 101) {
                    status = 0;
                }

                me.set({ status: status });
            }, 500);
        }
    };
</script>

<style>
    h3 {
        margin-top: 2em;
    }
    h3:first-child {
        margin-top: 0;
    }
</style>
